<!--
 * @docName: howToSign.vue
 * @Author: mwl
 * @Date: 2023/9/27
 * @LastEditors: zhongxiong
 * @LastEditTime: 11:02
-->
<template>
  <a-modal width='750px' v-model="howToConfig.howToVisible" :title="howToConfig.title" :destroyOnClose="true" :footer="false" @ok="handleOk">
    <div class='content-box'>
<!--      <div class='content-left' v-if='howToConfig.phone && howToConfig.legalCard'>
        <h3>签署电子委托书</h3>
        <div class='content-left-box'>
            <a-form-model ref="ruleForm" :model="form" :rules="validatorRules" class="password-retrieval-form">
              <div class="input-info">
                <a-form-model-item prop="phone"  label="法人手机号" :label-col="labelCol" :wrapper-col="wrapperCol">
                  <a-input v-model="form.phone" disabled size="large" placeholder="请输入法人手机号" />
                </a-form-model-item>
                <a-row>
                  <a-form-model-item prop="captcha" label="验证码" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-col class="gutter-row" :span="14">
                      <a-input v-model="form.captcha" size="large" type="text" placeholder="验证码" autocomplete="off">
                        <a-icon slot="prefix" type="mail" :style="{ color: 'rgba(0,0,0,.25)' }"/>
                      </a-input>
                    </a-col>
                    <a-col class="gutter-row" :span="9" :offset="1">
                      <a-button
                        class="getCaptcha"
                        size="large"
                        :disabled="state.smsSendBtn"
                        @click.stop.prevent="getCaptcha"
                        v-text="!state.smsSendBtn && '发送验证码'||(state.time+' s')"></a-button>
                    </a-col>
                  </a-form-model-item>
                </a-row>
              </div>
              <a-form>
                <a-form-item :wrapperCol="{span: 6, offset: 10}">
                  &lt;!&ndash;        <a-button @click="prevStep">上一步</a-button>&ndash;&gt;
                  <a-button
                    type="primary"
                    htmlType="submit"
                    @click.stop.prevent="submitFun"
                  >签署委托书</a-button>
                </a-form-item>
              </a-form>
            </a-form-model>
        </div>
      </div>
      <div v-else class='content-left'>
        <h3>您尚未完成法人身份验证，无法进行电子签署，您可以：</h3>
        <div class='content-left-box'>
          <p>① 上传法人身份证
            <a-icon v-if='howToConfig.legalCard' style='color: #2f54eb;' type='check-circle' theme="filled" />
            <a-icon v-else style='color: #888;' type='question-circle' theme="filled" />
          </p>
          <p>① 法人实名手机号认证
            <a-icon v-if='howToConfig.phone' style='color: #2f54eb;' type='check-circle' theme="filled" />
            <a-icon v-else style='color: #888;' type='question-circle' theme="filled" />
          </p>
          <a-button style='margin-top: 100px' type="primary" @click='handleOk()'>立即认证</a-button>
        </div>
      </div>-->
      <div class='content-right'>
        <h3>请上传已盖章的委托书扫描版</h3>
        <div class='content-right-box'>
          <p-UpLoadFile :showHelp="true" v-model='contractObj' :config='config' :customRequestEvent="PUpLoadFileCustomRequestEvent"></p-UpLoadFile>
          <p v-if='contractObj.card3.length==0' @click='upload' style='text-align: center;line-height: 32px;'>《委托书》<a-button type="link" style='padding:0;'>下载</a-button></p>
          <div v-else style='text-align: center;margin: 10px 0;'><a-button style='padding-left: 50px;padding-right: 50px;' @click='paperSign' type="primary">提 交</a-button></div>
        </div>

      </div>
    </div>


  </a-modal>
</template>

<script>
import { getContractDetails, getContractUpdate, getTemplatePlus, queryCheckSMS, querySignSMS } from '@api/enterprise'

export default {
  name: 'howToSign',
  props:['howToConfig'],
  data(){
    return {
      contractObj:{
        card3:[]
      },
      form:{
        phone:null
      },
      validatorRules: {
        phone: [
          { required: true,message: '请输入手机号!' },
        ],
        captcha: [
          { required: true ,message: '请输入验证码!'},
          { validator: this.handleCaptchaCheck }
        ]
      },
      config:{
        // 此参数必填  上传路径
        dir: "/qsb/contract/",
        // 此参数必填 表示要采用什么模式   可选的值： 单文件  多文件  身份证  all  ；  单文件 对应 card1 ；   多文件 对应  card3 ； 身份证  对应  card1（身份证正面）、card2（身份证反面）
        model: "多文件",
        // 此参数选填   此属性只在 model= 身份证 时 启用   默认值文false
        showBG: false,
        // 此参数选填  表示是否可编辑
        readonly: false,
        // 此参数选填   文件上传必填校验 默认为false 不校验   当值为true时进行强制校验  需要配合【getDataCheckRes】方法使用；
        // 方法【getDataCheckRes】的具体用法如: this.$refs.UpLoadFile.getDataCheckRes({ card1: "请上传身份证正面",card2: "请上传身份证反面", card3: "请上传附件"});
        // 其中 【getDataCheckRes】的参数辨识检验不通过时对应的提示信息；card1、card2、card3均可缺省，也可选填对应的字段    此参数可空
        required: false,
        // 此参数选填   要回显的数据 card1 card2 的值的格式为：{name:'',url:''} ;  card3 的值的格式为 [{name:'',url:''}，{name:'',url:''}]
        defaultFileList: {
          card1: {},
          card2: {},
          card3: [],
        },
        tips:{
          card3: '上传盖章委托书，最多上传三个文件',
        },
        // 此参数集必填
        fielConfig: {
          // 允许上传的文件类型 当为空时表示不限制  默认为空
          //    可供选择类型：
          //          图片('jpg', 'png', 'jpeg')
          //          文档('xlsx', 'xls', 'pptx', 'ppt', 'pdf', 'doc', 'docx', 'txt')
          //          压缩包('zip', 'rar')  发票('pdf', 'jpg', 'png', 'jpeg', 'doc', 'docx', 'zip', 'rar')
          //          PDF(pdf)
          //          委托代征协议('pdf','jpg', 'png', 'jpeg')
          //          我的任务('jpg', 'png', 'jpeg','pdf','xlsx', 'xls', 'pdf', 'doc', 'docx','zip', 'rar' )
          // eg:
          //    当值为string类型时，对所有（card1,card2,card3）的有效；
          //    当值为对象（{"card1":'图片',"card2":'文档', "card3":'PDF'}）时，可指定每个（card1/card2/card3）所对应的类型
          type: "我的任务",
          // 允许上传的文件个数  默认值为1
          // eg: 1 表示只允许上传1个文件；
          //      当值为对象（{"card1":1,"card2":2, "card3":3}）时，可指定每个（card1/card2/card3）所对应的类型
          size:3,
          // 上传的单个文件大小 单位为 MB  默认值为1
          //  eg: 当值为 number 时，对所有（card1,card2,card3）的有效；
          //当值为对象（{"pdf":5,"xlsx":10, "zip":100}）时,可指定对应的文件类型的大小（单位：MB）
          singleFileSize: 10,
        },
      },
      state: {
        time: 60,
        smsSendBtn: false,
        passwordLevel: 0,
        passwordLevelChecked: false,
        percent: 10,
        progressColor: '#FF0000'
      },
      labelCol: { span:6},
      wrapperCol: { span: 18 },
      cloudDetail:{}

    };
  },
  watch:{
    howToConfig:{
      handler(val){
        if(val.phone){
          this.$nextTick(() => {
            this.form.phone = val.phone;
          })

        }
        console.log(33,val)
      },
      deep:true
    },
  },
  created() {
  },
  mounted() {

  },
  methods:{
    //c初始化查询状态

    handleOk(){
      this.$router.push({
        path: '/registerProcess/registerProcess'
      })
    },
    //电子签署
    submitFun(){
      let params = {};
      params.agreeInfoId = this.howToConfig.cloudAgreeId;
      console.log(params)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          getTemplatePlus(params).then((res) => {
            if(res.success){
              // this.$message.success('签署成功！');
              this.$emit('popUpsClick',{'name':'signedSuccess','type':'1'})
            }else{
              this.$message.warning(res.message);
            }
          })
        }
      })


    },
    getCaptcha(e) {
      e.preventDefault()
      let that = this
      this.$refs['ruleForm'].validateField(['phone'], (err) => {
          if (!err) {
            this.state.smsSendBtn = true;
            let interval = window.setInterval(() => {
              if (that.state.time-- <= 0) {
                that.state.time = 60;
                that.state.smsSendBtn = false;
                window.clearInterval(interval);
              }
            }, 1000);
            const hide = this.$message.loading('验证码发送中..', 3);
            const params = this.form.phone;
            querySignSMS(params).then((res) => {
              if (!res.success) {
                this.$message.warning(res.result);
                setTimeout(hide, 0);
              }else{
                this.$message.success('发送成功！');
              }
              setTimeout(hide, 500);
            }).catch(err => {
              setTimeout(hide, 1);
              clearInterval(interval);
              that.state.time = 60;
              that.state.smsSendBtn = false;
              this.$message.warning(err);
            });
          }
        }
      );
    },
    handleCaptchaCheck(rule, value, callback){
      if(!value){
        callback(new Error("请输入验证码"))
      }else{
        queryCheckSMS(value,this.form.phone).then((res) => {
          if (res.success) {
            callback()
          } else {
            callback(res.message)
          }
        })
      }
    },
    //获取详情
    contractDetail(id){
      getContractDetails(id).then(res => {
        if (res.success) {
          if (res.result) {
            this.cloudDetail = res.result;
            this.getContractUpdateFun()
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    paperSign(){
      let id = this.howToConfig.cloudAgreeId;
      this.contractDetail(id)
    },
    //纸质签署接口
    getContractUpdateFun(){
      console.log(this.contractObj)
      let params ={};
      params = this.cloudDetail;
      params.agreeType = 2;
      params.agreeUrl = JSON.stringify(this.contractObj.card3);
      params.transCode = 30013;

      getContractUpdate(params).then(res => {
        if (res.success) {
          // this.$message.success('纸质合同提交成功！');
          this.$emit('popUpsClick',{'name':'signedSuccess','type':'2'})
        }else{
          this.$message.warning(res.message);
        }
      })
    },
    //下载
    upload() {
      if (this.howToConfig.cloudAgreeUrl.includes('jpeg') || this.howToConfig.cloudAgreeUrl.includes('png') || this.howToConfig.cloudAgreeUrl.includes('jpg') || this.howToConfig.cloudAgreeUrl.includes('pdf')) {
        this.AddWatermark.addWatermark(this.howToConfig.cloudAgreeUrl).then(res => {
          const a = document.createElement('a')
          a.href = res.url
          a.download = '授权书' + '.' + res.suffix;
          a.click()
          window.URL.revokeObjectURL(res.url);
        })
      } else {
        this.$message.warning('格式不对，无法下载');
      }
    },
  }
}
</script>

<style scoped lang='less'>
.content-box{
  display: flex;
  box-sizing: border-box;
  .content-left{
    width: 650px;
    padding: 5px 10px;
    .content-left-box{
      box-sizing: border-box;
      padding: 35px;
      border:1px solid #ccc;
      height: 300px;
    }
  }
  .content-right{
    width: 700px;
    padding: 5px 10px;
    .content-right-box{
      border:1px solid #ccc;height: 300px;
    }
  }
}

</style>
